<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form
                inline
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item>
                  <el-input
                    style="width: 220px"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                  >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-circle-plus"
                    type="primary"
                    @click="newModelSetting"
                  >
                    新增模块用户设置
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              >
              </el-table-column>
              <el-table-column
                prop="moduleName"
                align="center"
                label="模块名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="smsRetry"
                align="center"
                label="是否显示所有部门"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.showAllOrganize ? "是" : "否" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="smsRetry"
                align="center"
                label="是否显示自定义部门"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.showCustomOrganize ? "是" : "否" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="smsRetry"
                align="center"
                label="是否显示系统工作组"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.showAllWorkGroup ? "是" : "否" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="smsRetry"
                align="center"
                label="是否显示个人工作组"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.showPersonalWorkGroup ? "是" : "否"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editModule(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delModule(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="smsRetry"
                align="center"
                label="是否短信提醒"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.smsRetry ? "是" : "否" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="dingRetry"
                align="center"
                label="是否钉钉提醒"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.dingRetry ? "是" : "否" }}</span>
                </template>
              </el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog
      v-if="showModule"
      :visible.sync="showModule"
      title="新增/编辑模块用户设置:"
      width="800px"
      @close="close"
    >
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            label-position="right"
            style="margin:0 25px"
            ref="views"
            :rules="rules"
            :model="formInfo"
          >
            <el-form-item label="模块:" prop="module">
              <el-select
                @change="findName"
                v-model="formInfo.module"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in smsTemplateKeys"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="是否显示所有部门:">
                  <el-switch
                    @change="changeAllOrganize"
                    v-model="formInfo.showAllOrganize"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否显示自定义部门:">
                  <el-switch
                    @change="changeCustomOrganize"
                    v-model="formInfo.showCustomOrganize"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="是否显示系统工作组:">
                  <el-switch
                    @change="changeAllWorkGroup"
                    v-model="formInfo.showAllWorkGroup"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否显示个人工作组:">
                  <el-switch
                    @change="changePersonalWorkGroup"
                    v-model="formInfo.showPersonalWorkGroup"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item
              v-if="formInfo.showCustomOrganize"
              label="自定义部门:"
              prop="customOrganizeIds"
            >
              <user-select
                placeholder="请选择自定义部门"
                :containUser="0"
                :isMulSelect="true"
                @getUser="getUser"
                v-model="formInfo.customOrganizeUqIds"
              ></user-select>
            </el-form-item>
            <el-form-item
              v-if="formInfo.showAllOrganize"
              label="所有部门标题名称:"
              prop="showAllOrganizeName"
            >
              <el-input
                style="width: 500px;"
                v-model="formInfo.showAllOrganizeName"
                placeholder="请输入所有部门标题名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formInfo.showCustomOrganize"
              label="自定义部门标题名称:"
              prop="showCustomOrganizeName"
            >
              <el-input
                style="width: 500px;"
                v-model="formInfo.showCustomOrganizeName"
                placeholder="请输入自定义部门标题名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formInfo.showAllWorkGroup"
              label="系统工作组标题名称:"
              prop="showAllWorkGroupName"
            >
              <el-input
                style="width: 500px;"
                v-model="formInfo.showAllWorkGroupName"
                placeholder="请输入系统工作组标题名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formInfo.showPersonalWorkGroup"
              label="个人工作组标题名称:"
              prop="showPersonalWorkGroupName"
            >
              <el-input
                style="width: 500px;"
                v-model="formInfo.showPersonalWorkGroupName"
                placeholder="请输入个人工作组标题名称"
              ></el-input>
            </el-form-item>

            <el-row :gutter="10">
              <el-col :span="14">
                <el-form-item label="短信提醒:" prop="smsRetry">
                  <el-switch
                    v-model="formInfo.smsRetry"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="钉钉提醒:" prop="dingRetry">
                  <el-switch
                    v-model="formInfo.dingRetry"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="14">
                <el-form-item label="极光推送:" prop="jpushRetry">
                  <el-switch
                    v-model="formInfo.jpushRetry"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="华为推送:" prop="huaweiPushRetry">
                  <el-switch
                    v-model="formInfo.huaweiPushRetry"
                    active-color="#13ce66"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="是"
                    inactive-text="否"
                    inactive-color="#eeeeee"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="文件类型:" prop="fileTypes">
              <el-input
                style="width: 500px;"
                v-model="formInfo.fileTypes"
                placeholder="请输入文件类型"
              ></el-input>
            </el-form-item>
            <el-form-item label="校验提示语:" prop="description">
              <el-input
                style="width: 500px;"
                v-model="formInfo.description"
                placeholder="请输入校验提示语"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="saveModule">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  export default {
    created() {
      this.getPageData(1);
    },
    data() {
      return {
        searchDto: {
          pageIndex: "",
          pageSize: "",
          keywords: ""
        },
        pageData: {},
        loading: false,
        showModule: false,
        rules: {
          module: [{required: true, message: "请选择模板", trigger: "blur"}],
          customOrganizeIds: [
            {required: true, message: "请选择部门", trigger: "blur"}
          ],
          showPersonalWorkGroupName: [
            {
              required: true,
              message: "请输入个人工作组标题名称",
              trigger: "blur"
            }
          ],
          showAllOrganizeName: [
            {required: true, message: "请输入所有部门标题名称", trigger: "blur"}
          ],
          showCustomOrganizeName: [
            {
              required: true,
              message: "请输入自定义部门标题名称",
              trigger: "blur"
            }
          ],
          showAllWorkGroupName: [
            {
              required: true,
              message: "请输入系统工作组标题名称",
              trigger: "blur"
            }
          ]
        },
        formInfo: {
          module: "",
          showAllOrganize: true,
          showCustomOrganize: true,
          customOrganizeIds: "",
          customOrganizeUqIds: "",
          showAllWorkGroup: true,
          showPersonalWorkGroup: true,
          showPersonalWorkGroupName: "",
          showAllOrganizeName: "",
          showCustomOrganizeName: "",
          showAllWorkGroupName: "",
          smsRetry: true,
          dingRetry: true
        },
        smsTemplateKeys: this.getDictionary("MODULE")
      };
    },
    watch: {},
    methods: {
      getUser(val) {
        this.formInfo.customOrganizeUqIds = val.uuid;
        this.formInfo.customOrganizeIds = "," + val.origId + ",";
      },
      changeAllOrganize(val) {
        !val && (this.formInfo.showAllOrganizeName = "");
      },
      changeCustomOrganize(val) {
        if (!val) {
          this.formInfo.customOrganizeIds = "";
          this.formInfo.customOrganizeUqIds = "";
          this.formInfo.showCustomOrganizeName = "";
        }
      },
      changeAllWorkGroup(val) {
        !val && (this.formInfo.showAllWorkGroupName = "");
      },
      changePersonalWorkGroup(val) {
        !val && (this.formInfo.showPersonalWorkGroupName = "");
      },
      findName(val) {
        let obj = this.smsTemplateKeys.find(item => item.keyword == val);
        this.formInfo.moduleName = obj.label;
      },
      getPageData(val) {
        let tem = Object.assign(this.searchDto, val);
        this.API.getModuleSettingPageList(tem).then(ret => {
          this.pageData = ret.data;
        });
      },
      //新增模块用户设置
      newModelSetting() {
        this.showModule = true;
      },
      search() {
        this.getPageData(1);
      },
      clear() {
        this.searchDto = {
          pageIndex: "",
          pageSize: "",
          keywords: ""
        };
        this.getPageData(1);
      },
      editModule(row) {
        let tem = {
          id: row.id
        };
        this.API.getModuleSettingById(tem).then(ret => {
          this.formInfo = ret.data;
        });
        this.showModule = true;
      },
      //删除
      delModule(row) {
        this.$confirm("确定删除当前模板设置？", "提示", {}).then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteModuleSettingById(tem).then(() => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        });
      },
      //保存
      saveModule() {
        this.$refs["views"].validate(valid => {
          if (valid) {
            let tem = {body: this.formInfo};
            this.API.addOrUpdateModuleSetting(tem).then(ret => {
              this.$message.success("操作成功");
              this.getPageData(1);
              this.close();
            });
          }
        });
      },
      close() {
        this.formInfo = {
          module: "",
          showAllOrganize: true,
          showCustomOrganize: true,
          customOrganizeIds: "",
          customOrganizeUqIds: "",
          showAllWorkGroup: true,
          showPersonalWorkGroup: true,
          showPersonalWorkGroupName: "",
          showAllOrganizeName: "",
          showCustomOrganizeName: "",
          showAllWorkGroupName: "",
          smsRetry: true,
          dingRetry: true
        };
        this.showModule = false;
      }
    }
  };
</script>
<style scoped></style>
